<template>
  <el-dialog title="导航栏信息" v-model="dialogFormVisible" v-loading="loading" element-loading-text="拼命加载中" close-on-press-escape @close="cleardialog">
    <el-form :model="form" :label-width="formLabelWidth">
      <el-form-item label="上级类别名称">
        <el-cascader :options="options" change-on-select v-model="zid" @change="handleChange" :props="props" style="width:100%"></el-cascader>
      </el-form-item>
      <el-form-item label="Icon图标" v-if="zid.length==1&&zid[0] != 99999">
        <el-select placeholder="请选择图片标识" v-model="form.tubiao" filterable clearable>
          <el-option v-for="item in option" :label="item.bookname" :value="item._id" :key="item._id">
            <i :class="item.bookname"></i> {{item.bookname}}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="规则名称">
        <el-input v-model="form.menu_name" placeholder="请填写规则名称"></el-input>
      </el-form-item>
      <el-form-item label="接口标识">
        <el-input v-model="form.api_name" placeholder="请填写接口标识"></el-input>
      </el-form-item>
      <el-form-item label="路由标识">
        <el-input v-model="form.router_name" @keyup.enter.native="handleBaocun('form')" placeholder="请填写规则标识"></el-input>
      </el-form-item>
      <el-form-item label="作为菜单显示">
        <el-switch on-text="是" off-text="否" on-value="1" off-value="0" v-model="form.is_menu"></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="vloading" @click="handleBaocun('form')">确认保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: ['dialogStatus', 'dhid', 'is_exit'],
  data() {
    return {
      vloading: false,
      loading: false,
      dialogFormVisible: false,
      formLabelWidth: '150px',
      form: {
        top_id: '',
        menu_name: "",
        tubiao: '',
        router_name: '',
        api_name: '',
        is_menu: 0
      },
      options: [],
      option: [],
      selArr1: [],
      zid: [],
      props: {
        value: '_id',
        label: 'menu_name',
        children: 'children'
      },
      url: ''
    }
  },
  watch: {
    dialogStatus(newValue) {
      this.dialogFormVisible = newValue
      if (newValue) {
        this.getNode()
        this.getSelect()
        //如果是编辑
        if (this.is_exit) {
          this.form = this.dhid
          this.form.is_menu = this.form.is_menu.toString()
          this.url = '/menu/update'
        } else {
          this.zid.unshift(this.dhid._id)
          //不是编辑
          this.url = '/menu/insert'
        }
        this.getSel()
      }
    },
  },
  methods: {
    handleChange(val) {
      this.zid = val
    },
    //提交
    handleBaocun(form) {
      this.vloading = true
      if (this.zid[this.zid.length - 1] == 99999) {
        this.form.top_id = '0'
      } else {
        this.form.top_id = this.zid[this.zid.length - 1]
      }
      if (this.zid.length != 1 || this.zid[0] == 99999) {
        this.form.tubiao = this.option[0]._id
      }
      this.form.is_menu = parseInt(this.form.is_menu)
      this.fetch(this.url, this.form, this.$store.getters.Request_Head, 'POST').then((userData) => {
        if (userData.status.code !== 1001) {
          this.$message.error(userData.data ? userData.data : userData.status.title)
        } else {
          this.vloading = false;
          this.$emit('CB-dialogStatus', 1)
        }
      }).catch(() => {
        this.$emit('API-ERR');
      })
    },

    async getSelect() {
      let userData = await this.fetch('/menu/treeselect', {}, this.$store.getters.Request_Head, 'POST')
      if (userData.status.code !== 1001) {
        this.$message.error(userData.data ? userData.data : userData.status.title)
      } else {
        let data = {
          _id: 99999,
          tubiao: 0,
          menu_name: '作为一级菜单'
        }
        this.options = userData.data
        this.options.unshift(data)
      }
    },
    //获取图标下拉列表
    async getNode() {
      let tableData = await this.fetch('/wordbook/index', {
        is_tu: true
      }, this.$store.getters.Request_Head, 'POST')
      if (tableData.status.code !== 1001) {
        this.$message.error(tableData.data ? tableData.data : tableData.status.title)
      } else {
        this.option = tableData.data
      }
    },
    getFiji(arr) {
      for (let i = 0; i < this.selArr1.length; i++) {
        //通过自己的top_id 找上一级
        if (arr.top_id == this.selArr1[i]._id) {
          this.zid.unshift(this.selArr1[i]._id)
          this.getFiji(this.selArr1[i])
        }
      }
    },
    //获得没有递归过的数据的
    getSel() {
      this.fetch('/menu/treeselect', {
        is_menu: 'no'
      }, this.$store.getters.Request_Head, 'POST').then((tableData) => {
        if (tableData.status.code !== 1001) {
          this.$message.error(tableData.data ? tableData.data : tableData.status.title)
        } else {
          this.selArr1 = tableData.data
          //如果是二级并且不是添加一级
          if (this.dhid.top_id != 0 && this.dhid != '') {
            this.getFiji(this.dhid)
          } else {
            //如果不是是添加子节点,或者是编辑一级
            if (!this.dhid._id || this.is_exit) {
              this.zid = [99999]
            }
          }
        }
      }).catch(() => {
        this.$emit('API-ERR');
      })
    },
    //关闭弹框
    cleardialog() {
      this.$emit('CB-dialogStatus', false)
      this.form = {
        top_id: '',
        menu_name: "",
        tubiao: '',
        router_name: '',
        api_name: '',
        is_menu: 0
      }
      this.zid = []
    }
  },
}

</script>
